import React from 'react';
import { observer } from 'mobx-react';
import { WeaRightMenu } from 'ecCom';
import { Row, Col, Button, Menu, Dropdown } from 'antd';


export interface RightMenuWrapProps {
    prefixCls?: string;
    rightMenuClick?: (key: any) => void;
    rightMenus?: any[];
    isDialog?: boolean;
    quickSize?: number;
    hideRightmenu?:boolean;
}
@observer
export default class RightMenuWrap extends React.Component<RightMenuWrapProps, any>{
    static defaultProps = {
        prefixCls: "coms-mode-menu-wrap",
    }
    handleButtonClick = (key) => {
        const { rightMenuClick } = this.props;
        rightMenuClick && rightMenuClick(key);
    }
    handleMenuClick = ({ key }) => {
        const { rightMenuClick } = this.props;
        rightMenuClick && rightMenuClick(key);
    }
    renderMenus = (rightMenus: any[]) => {
        const { prefixCls } = this.props;
        return (
            <div className={`${prefixCls}-drop-wrap`}>
                <div className={`${prefixCls}-drop-icon-bg`}></div>
                <Menu
                    prefixCls="mode-dropdown-menu"
                    className={`${prefixCls}-drop-menu`}
                    onClick={this.handleMenuClick}
                >
                    {
                        rightMenus.map((d, i) => {
                            return <Menu.Item key={d.key || i} disabled={d.disabled}>
                                <span className={`${prefixCls}-drop-icon`}>{d.icon}</span>
                                {d.content}
                            </Menu.Item>
                        })}
                </Menu>
            </div>
        )
    }
    render() {
        const {
            prefixCls = "coms-mode-menu-wrap",
            rightMenuClick,
            rightMenus = [],
            isDialog = false,
            children,
            quickSize = 5,
            hideRightmenu = false
        } = this.props;
        if(hideRightmenu){
            return  <React.Fragment>{children} </React.Fragment>;
        }

        if (isDialog) {
            const quickMenus = rightMenus.slice(0, quickSize);
            return (<div className={prefixCls} ref="_container">
                <WeaRightMenu
                    datas={rightMenus}
                    onClick={rightMenuClick}
                    collectParams={{
                        "favname": "",
                        "link": '/' + window.location.toString().split('/').slice(3).join('/'),
                        "favouritetype": 5,
                        "importantlevel": 1
                    }}
                >
                    {children}
                </WeaRightMenu>
                <Row className={`${prefixCls}-row`}>
                    <Col span={24} >
                        {quickMenus && quickMenus.map(btn => (
                            <Button type="primary" onClick={this.handleButtonClick.bind(this, btn.key)}><span className={`${prefixCls}-btn-icon`}>{btn.icon}</span>{btn.content}</Button>
                        ))}
                        <Dropdown getPopupContainer={() => this.refs._container} overlay={this.renderMenus(rightMenus)} placement="topRight" trigger="click">
                            <Button>更多>></Button>
                        </Dropdown>
                    </Col>
                </Row>
            </div>
            )
        } else {
            return (
                <WeaRightMenu
                    datas={rightMenus}
                    onClick={rightMenuClick}
                    collectParams={{
                        "favname": "",
                        "link": '/' + window.location.toString().split('/').slice(3).join('/'),
                        "favouritetype": 5,
                        "importantlevel": 1
                    }}
                >
                    {children}
                </WeaRightMenu>
            )
        }
    }
}

